<template>
  <div id="items">
    <el-card>
      <div slot="header">
        <span>选项管理</span>
        <el-button type="primary" @click="dlVisible=true;formItems.parent_id=0;getItems">添加分组</el-button>
      </div>
      <!-- 下拉菜单 -->
      <el-tree v-loading="loading" :data="items" :props="{label:'item_name',children:'children'}">
        <span slot-scope="{data,node}" class="olcontent">
                    {{data.item_name}}
                    <!-- 编辑 -->
                    <el-button type="primary" size="mini" @click.stop="edlVisible=true;eformItems=data" icon="el-icon-edit" class="editch">编辑</el-button>
                    <!-- 删除 -->
                    <el-button type="primary" size="mini" @click.stop="del(data.id)" icon="el-icon-cancel" class="delch">删除</el-button>
                    <!-- 向上排序按钮 -->
                    <el-button type="primary" size="mini" @click.stop="sort(data.id,'up')" icon="el-icon-arrow-up" class="upch"></el-button>
                    <!-- 向下排序按钮 -->
                    <el-button type="primary" size="mini" @click.stop="sort(data.id,'down')" icon="el-icon-arrow-down" class="downch"></el-button>
                    </span>
      </el-tree>
    </el-card>
    <!-- 点击添加节点按钮出现的页面 -->
    <el-dialog title="添加选项" :visible="dlVisible" width="40%" @close="cancel">
      <el-form :model="formItems" ref="formItems" label-width="120px" :rules="rules">
        <el-form-item label="编号" prop="id">
          <el-input v-model="formItems.parent_id"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="item_name">
          <el-input v-model="formItems.item_name"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="formItems.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
              </span>
    </el-dialog>
    <!-- 点击添加节点按钮出现的页面 -->
    <el-dialog title="添加选项" :visible="edlVisible" width="40%" @close="ecancel">
      <el-form :model="eformItems" ref="eformItems" label-width="120px" :rules="rules">
        <el-form-item label="编号" prop="id">
          <el-input v-model="eformItems.parent_id"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="item_name">
          <el-input v-model="eformItems.item_name"></el-input>
        </el-form-item>
        <el-form-item label="是否显示到导航" prop="status">
          <el-select v-model="eformItems.status" placeholder="">
            <el-option label="显示" value="1" checked> </el-option>
            <el-option label="不显示" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
                <el-button @click="ecancel">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
              </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dlVisible: false,
        edlVisible: false,
        loading: false,
        items: [],
        formItems: {
          item_name: "",
          parent_id: "",
          status: "1"
        },
        eformItems: {
          item_name: "",
          parent_id: "",
          status: "1"
        },
        rules: {
          item_name: [{
            validator: (rule, val, callback) => {
              this.axios.get(`/items/exists/item_name/${val}`).then(ret => {
                if (ret.data == true) {
                  callback(new Error("该名称已被注册"));
                } else {
                  callback();
                }
              });
            },
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.getItems();
    },
    methods: {
      //编辑
      edit() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.put(`/items/edit/${this.eformItems.id}`, {
              item_name: this.eformItems.item_name,
              status: this.eformItems.status
            }).then(() => {
              this.$message.success("编辑成功");
              this.edlVisible = false;
              this.$refs.eformItems.resetFields();
              this.getItems();
            })
          }
        })
      },
      //编辑里面的取消
      ecancel() {
        this.edlVisible = false;
        this.$refs.eformItems.resetFields();
      },
      //向上向下
      sort(id, dir) {
        this.axios.put(`/items/sort/${id}/${dir}`).then(() => {
          this.getItems();
        });
      },
      //添加
      add() {
        this.$refs.editformMenus.validate((flag) => {
          if (flag) {
            this.axios.post("/items/add", this.formItems).then(() => {
              this.$message.success("添加成功");
              this.dlVisible = false;
              this.$refs.formItems.resetFields();
              this.getItems();
            });
          }
        })
      },
      //添加里面的取消
      cancel() {
        this.dlVisible = false;
        this.$refs.formItems.resetFields();
      },
      //删除
      del(id) {
        this.$confirm("确定删除吗？", "提示")
          .then(() => {
            this.axios
              .delete(`/items/del/${id}`)
              .then(() => {
                this.$message.success("删除成功");
                this.getItems();
              })
              .catch(() => {
                this.$message.error("删除失败");
              });
          })
          .catch(() => {});
      },
      //获取
      getItems() {
        this.loading = true;
        this.axios
          .get("/items")
          .then(ret => {
            this.loading = false;
            this.items = ret.data;
          })
          .catch(() => {
            this.$message.error("获取数据失败");
          });
      }
    }
  };
</script>

<style>
  #items .el-tree-node__content {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    width: 95%;
    margin: 3px 2%;
  }
  #items .el-button--success {
    margin-left: 50px;
  }
  #items .olcontent {
    /* margin-left: 600px; */
    position: relative;
  }
  #items .editch {
    position: absolute;
    left: 600px;
    top: -5px;
  }
  #items .delch {
    position: absolute;
    left: 685px;
    top: -5px;
  }
  #items .upch {
    position: absolute;
    left: 770px;
    top: -5px;
  }
  #items .downch {
    position: absolute;
    left: 840px;
    top: -5px;
  }
</style>
